<template>
  <div>
    <el-container>
      <el-header>
        <h2>课程导入</h2>
      </el-header>
      <el-main>
        <div style="height: 50px; line-height: 50px">
          <span>获取上传模板：</span>
          <el-link href="template-source.xlsx">
            <el-button size="small" >下载</el-button>
          </el-link>
        </div>
        <el-upload
            class="upload-demo"
            ref="upload"
            :action="subjectUrl"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :file-list="fileList"
            :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">只能上传xlsx文件，且不超过10Mb</div>
        </el-upload>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'add',
  data() {
    return {
      fileList: [],
      subjectUrl: window.config.baseUrl + '/edu-service/subject/upload'
    };
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleSuccess() {
      this.$message.success('上传成功')
    }
  }
}
</script>